<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <div id="box">
      <!-- 当需要通过状态值计算出一个结果时，可以通过声明computed实现 -->
      <!-- 也可以通过函数实现，但是不规范，计算属性有缓存，性能更好 -->

      <!-- 例如把一个单词首字母大写 -->
      {{handleName}}

      <!-- 例如计算金额 -->
      {{totalPrice}}
    </div>

    <script>
      let vm = new Vue({
        el: "#box",
        data: {
          name: "lucy",
          price: 99,
          num: 36,
        },
        // computed
        computed: {
          handleName() {
            return (
              this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            );
          },

          totalPrice() {
            return this.price * this.num;
          },
        },
      });
    </script>
  </body>
</html>
